import React from 'react';
import { View, ScrollView, StyleSheet, Text } from 'react-native';
import ReactImageZoonOne from "./image-zoom-demo-one";
import ReactImageZoonTwo from "./image-zoom-demo-two";
import ReactImageZoonThree from "./image-zoom-demo-three";

const ImageZoomViewer = () => {
  return (
    <ScrollView style={styles.scrollContainer} contentContainerStyle={styles.scrollContent}>
      <View style={styles.exampleContainer}>
        <Text style={styles.title}>ReactImageZoonOne</Text>
        <View style={styles.componentWrapper}>
          <ReactImageZoonOne />
        </View>
      </View>
      <View style={styles.exampleContainer}>
        <Text style={styles.title}>ReactImageZoonTwo</Text>
        <View style={styles.componentWrapper}>
          <ReactImageZoonTwo />
        </View>
      </View>
      <View style={styles.exampleContainer}>
        <Text style={styles.title}>ReactImageZoonThree</Text>
        <View style={styles.componentWrapper}>
          <ReactImageZoonThree />
        </View>
      </View>
    </ScrollView>
  );
};

const styles = StyleSheet.create({
  scrollContainer: {
    flex: 1,
    backgroundColor: '#f5f5f5',
  },
  scrollContent: {
    padding: 16,
  },
  exampleContainer: {
    marginBottom: 24,
    padding: 16,
    backgroundColor: 'white',
    borderRadius: 8,
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 2 },
    shadowOpacity: 0.1,
    shadowRadius: 4,
    elevation: 2,
  },
  title: {
    fontSize: 18,
    fontWeight: 'bold',
    marginBottom: 8,
    color: '#333',
  },
  componentWrapper: {
    height: 600, // 为每个组件设置固定高度
  },
});

export const displayName = "ReactNativeImageZoomViewer";
export const framework = "React";
export const category = "UI";
export const title = "react-native-image-zoom-viewer";
export const documentationURL = "https://github.com/react-native-oh-library/react-native-image-viewer";
export const description = "React Native Image Viewing Component with Zooming Capabilities";

export const examples = [
    {
        title: "react-native-image-zoom-viewer",
        render: function (): any {
            return <ImageZoomViewer />;
        },
    },
];